// pages/game_instance/mdt/index.ts
Page({
  
  /**
   * 页面的初始数据
   */
  data: {
    // Canvas 上下文和变换参数
    windowWidth:wx.getWindowInfo().windowWidth,
    windowHeight:wx.getWindowInfo().windowHeight,
    ctx: null as CanvasContext | null,
    canvas:null,
    dpr:wx.getWindowInfo().pixelRatio,
    offsetX: 0,     // 画布偏移 X
    offsetY: 0,     // 画布偏移 Y
    scale: wx.getWindowInfo().pixelRatio,       // 缩放比例,默认值为DPR
    lastDistance: 0,// 双指上次间距（用于缩放计算）
    touchStartPos: { x: 0, y: 0 }, // 触摸起始点
    isTouching: false,            // 是否正在触摸
    isPinching: false,            // 是否双指缩放
    cachedMap:null,
    canvasElement: [
      { type: "backImage", src:"https://wow.shuzhipeixian.com:12812/download/wow_collect/mystic/sys/jinenggongvle.webp" },
      // { type: "pipeline", points: [[100, 400], [300, 400], [300, 200]] }
    ] as Array<any>,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {
      // 获取系统信息对象
      const systemInfo = wx.getWindowInfo();

      // // 屏幕宽度（单位：px）
      // const screenWidth = systemInfo.screenWidth;

      // // 屏幕高度（单位：px）
      // const screenHeight = systemInfo.screenHeight;

      // 窗口可用宽度（不包含导航栏等系统区域）
      const windowWidth = systemInfo.windowWidth;

      // 窗口可用高度（不包含导航栏等系统区域）
      const windowHeight = systemInfo.windowHeight;

      // console.log('屏幕尺寸:', screenWidth + 'x' + screenHeight);
      console.log('窗口尺寸:', windowWidth + 'x' + windowHeight);
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    const query = wx.createSelectorQuery()
    query.select('#factoryCanvas')
      .fields({ node: true, size: true })
      .exec((res) => {
        const canvas = res[0].node
        const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
        const dpr = wx.getWindowInfo().pixelRatio;
        console.log("画布尺寸1",canvas.width,canvas.height)
        // 高清适配
        canvas.width = canvas.width * dpr;
        canvas.height = canvas.height * dpr;
        console.log("画布尺寸2",canvas.width,canvas.height)

        this.setData({
          ctx:ctx,
          canvas:canvas
        })
   
        // 初始化绘制
        this.drawFactory()
      })
  },
  // 绘制工厂元素（应用坐标变换）
drawFactory() {
  if (!this.data.ctx) return

  const ctx = this.data.ctx
  const canvas = ctx.canvas
  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height)

  // 应用变换矩阵
  ctx.save()
  ctx.translate(this.data.offsetX, this.data.offsetY)
  console.log("缩放比例",this.data.scale)
  ctx.scale(this.data.scale, this.data.scale)
  console.log("画布尺寸3",canvas.width,canvas.height)
  // 绘制画布背景/厂区平面图
  // this.drawBackMap(ctx)

  // // 绘制工厂元素
  this.data.canvasElement.forEach(element => {
    if (element.type === 'backImage') {
      this.drawBackMap(element, ctx)
    }
    else if(element.type === 'machine'){
      this.drawMachine(element as Machine, ctx)
    }
    else if (element.type === 'pipeline') {
      this.drawPipeline(element as Pipeline, ctx)
    }
  })

  ctx.restore()
},
drawBackMap(data:any, ctx: CanvasRenderingContext2D){
  // 加载图片
  if(!this.data.canvas){
    return
  }
  let img = this.data.canvas.createImage();
  img.src = data.src; // 本地路径 或 网络 URL（需配置合法域名）
  if(this.data.cachedMap){
    img = this.data.cachedMap
    let height_to_width_ratio = img.height / img.width
    ctx.drawImage(
      this.data.cachedMap,
      0,0,  // 图片起始坐标
      img.width, img.height, // 图片原始尺寸
      this.data.offsetX,this.data.offsetY,                  // 画布绘制起点
      this.data.windowWidth ,          // 目标宽度
      this.data.windowWidth * height_to_width_ratio       // 目标高度
    );
  }
  else{
    img.onload = () => {
      // 绘制背景图（平铺全屏）
      this.setData({
        cachedMap : img
      })
      let height_to_width_ratio = img.height / img.width
      console.log("图片的宽和高",img.width,img.height,height_to_width_ratio, this.data.canvas.width,this.data.canvas.width * height_to_width_ratio )
      //计算图片宽高比
      ctx.drawImage(
        img,
        0,0,  // 图片起始坐标
        img.width, img.height, // 图片原始尺寸
        this.data.offsetX,this.data.offsetY,                  // 画布绘制起点
        this.data.canvas.width ,          // 目标宽度
        this.data.canvas.width * height_to_width_ratio       // 目标高度
      );
    };
  }
  

  img.onerror = (err) => {
    console.error('图片加载失败:', err);
  };
},

// 绘制设备（示例）
drawMachine(machine: Machine, ctx: CanvasRenderingContext2D) {
  ctx.fillStyle = '#4a90e2'
  ctx.fillRect(
    machine.x - machine.width/2,
    machine.y - machine.height/2,
    machine.width,
    machine.height
  )
},

// 绘制管道（示例）
drawPipeline(pipe: Pipeline, ctx: CanvasRenderingContext2D) {
  ctx.beginPath()
  ctx.moveTo(pipe.points[0][0], pipe.points[0][1])
  pipe.points.slice(1).forEach(point => {
    ctx.lineTo(point[0], point[1])
  })
  ctx.strokeStyle = '#666'
  ctx.lineWidth = 8
  ctx.stroke()
},

// 辅助网格绘制（调试用）
drawGrid(ctx: CanvasRenderingContext2D) {
  ctx.strokeStyle = '#eee'
  ctx.lineWidth = 1
  for (let x = -1000; x <= 1000; x += 50) {
    ctx.beginPath()
    ctx.moveTo(x, -1000)
    ctx.lineTo(x, 1000)
    ctx.stroke()
  }
  for (let y = -1000; y <= 1000; y += 50) {
    ctx.beginPath()
    ctx.moveTo(-1000, y)
    ctx.lineTo(1000, y)
    ctx.stroke()
  }
},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },
// 触摸开始（记录起始点）
handleTouchStart(e: TouchEvent) {
  console.log("触摸开始",e)
  const touches = e.touches
  this.setData({
    touchStartPos : { x: touches[0].x, y: touches[0].y }
  })
  // 判断是否双指操作
  if (touches.length >= 2) {
    this.data.isPinching = true
    this.data.lastDistance = this.calcFingerDistance(touches[0], touches[1])
  }
},

// 触摸移动（处理拖拽/缩放）
  handleTouchMove(e: TouchEvent) {
   console.log("拖拽缩放")
    const touches = e.touches
    if (!this.data.ctx || touches.length === 0) return

    // 双指缩放逻辑
    if (touches.length >= 2 && this.data.isPinching) {
      console.log("双指缩放")
      const newDistance = this.calcFingerDistance(touches[0], touches[1])
      
      const scaleFactor = (newDistance / this.data.lastDistance)
      this.updateScale(scaleFactor)
      this.setData({
        lastDistance:newDistance
      })
      return
    }

    // 单指拖拽逻辑
    console.log("dpr",this.dpr)
    const touchY = touches[0].y ; // Y 轴坐标按 DPR 缩放
    const deltaX = touches[0].x - this.data.touchStartPos.x
    const deltaY = (touchY - this.data.touchStartPos.y)*0.2
    this.setData({
      offsetX:this.data.offsetX + deltaX,
      offsetY:this.data.offsetY + deltaY,
      touchStartPos:{ x: touches[0].x, y: touches[0].y }
    })

    this.drawFactory()
  },

  // 计算双指间距
  calcFingerDistance(t1: Touch, t2: Touch): number {
    const dx = (t2.x - t1.x)*0.8
    const dy = (t2.y - t1.y)*0.8
    return Math.sqrt(dx * dx + dy * dy)
  },

  // 缩放系数更新（带限制）
  updateScale(factor: number) {
    const newScale = this.data.scale * factor
    // 限制缩放范围 (0.5x ~ 5x)
    // if (newScale >= 0.5 && newScale <= 5) {
      this.setData({
        scale:newScale
      })
      this.drawFactory()
    // }
  },
  resetCanvas(){
    this.setData({
      offsetX:0,
      offsetY:0,
      scale:this.data.dpr
    })
    this.drawFactory()
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
  
})